<template>
  <div class="wrap">
    <div class="headtit">
      <div class="btn"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#arrow-left.6f6409e"></use></svg></div>
      <h1>我的</h1>
    </div>
    <div class="container">
      <router-link to="/login">
      <span class="portrait">
        <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#avatar-default"></use></svg>
      </span>
      <div class="login">
        <h1>登录/注册</h1>
        <p><svg fill="#fff"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#mobile"></use></svg>登录后享受更多特权</p>
      </div>
      <span class="profile-2XuMq">
        <svg fill="#fff"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#arrow-right"></use></svg>
      </span>
       </router-link>
    </div>

    <div class="option">
      <a href="#">
        <svg fill="#ff5f3e"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#luckybag"></use></svg>
        <p>优惠</p>
      </a>
      <a href="#">
        <svg fill="#6ac20b"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#profile-coins"></use></svg>
        <p>积分</p>
      </a>
    </div>

    <div class="list">
      <ul>
        <a href="#">
          <li>
            <svg class="icon" fill="#4aa5f0"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#order"></use></svg>
            <p><i>我的订单</i><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#arrow-right"></use></svg></p>
          </li>
        </a>
        <a href="#">
          <li>
            <svg class="icon" fill="#fc7b53"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#point"></use></svg>
            <p><i>积分商城</i><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#arrow-right"></use></svg></p>
          </li>
        </a>
        <a href="#">
          <li>
           <svg class="icon" fill="#ffc636"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#vip"></use></svg>
            <p><i>饿了么会员卡</i><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#arrow-right"></use></svg></p>
          </li>
        </a>
      </ul>

      <ul>
        <a href="#">
          <li>
            <svg class="icon" fill="#4aa5f0"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#service"></use></svg>
            <p><i>服务中心</i><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#arrow-right"></use></svg></p>
          </li>
        </a>
        <a href="#">
          <li>
            <svg class="icon" fill="#3cabff"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#download"></use></svg>
            <p><i>下载饿了么APP</i><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#arrow-right"></use></svg></p>
          </li>
        </a>
      </ul>
    </div>

    <div class="foot">
      <div class="tab">
        <router-link to="/">
          <svg class="index-footerTabIcon_1EbB8wS"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#index-regular.b245d60"></use></svg>
          <span>外卖</span>
        </router-link>
        <router-link to="/find">
          <svg class="index-footerTabIcon_1EbB8wS"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#discover-regular.8ef537f"></use></svg>
          <span>发现</span>
        </router-link>
        <router-link to="/order">
          <svg class="index-footerTabIcon_1EbB8wS"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#order-regular.41c17f8"></use></svg>
          <span>订单</span>
        </router-link>
        <router-link to="/profile">
          <svg class="index-footerTabIcon_1EbB8wS"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#profile.dbc5ebf"></use></svg>
          <span class="on">我的</span>
        </router-link>
      </div> 
    </div>
  </div>
</template>
<script>
  export default {
    name:'login',
    data () {
      return{

      }
    }
  }
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
*{box-sizing:border-box;}
.wrap{height: 100%;background: #f5f5f5; width:100%;}
.headtit{height: .88rem; background-image: linear-gradient(90deg,#0af,#0085ff); position: fixed; top:0; width: 100%; z-index: 1000; display: flex;text-align: center; line-height: .88rem; justify-content: center;}
.headtit .btn{height: .88rem; width: .88rem; display: flex; align-items: center; justify-content: center; position: absolute; left:0; top:0;}
.headtit svg{height: .44rem; width: .44rem;}
.headtit h1{color: #fff; font-size: .35rem;}
.container a{padding:.5rem .3rem; background-image: linear-gradient(90deg,#0af,#0085ff); color: #fff; display: flex; align-items: center;  margin-top:.88rem;}
.container .portrait{ font-size: 1.2rem; line-height: 1.2rem; border-radius: 50%; background: #fff; display: inline-block; vertical-align: middle; width:1.2rem; height: 1.2rem;}
.container .portrait svg{width:1.2rem; height: 1.2rem; display: inline-block;}
.container .login{margin-left:.36rem; flex: 1;}
.container a{color: #fff;}
.container .login h1{font-size: .44rem; font-weight: normal; line-height: 1.1; margin-bottom: .16rem;}
.container .login p{font-size: .25rem; line-height: 1.2;}
.container .login svg{width: .32rem; height: .32rem; margin-right:.05rem; position: relative; top:.05rem;}

.option{display: flex; flex-direction:row; background: #fff; border-bottom: 1px solid #ddd;}
.option a{display: inline-block; width:50%; text-align: center; padding: .35rem 0; color: #000; font-size: .24rem;}
.option a:first-child{ border-right:1px solid #ccc;}
.option a svg{width:.52rem; height: .52rem;}
.option a p{line-height: 1.2; margin-top:.1rem;}

.list ul{ border-top:1px solid #ddd; border-bottom: 1px solid #ddd; margin-top:.2rem; background:#fff;}
.list li{display: flex; align-items: center;}
.list li .icon{width: .36rem; height: .36rem; margin:0 .2rem;}
.list li p{ padding: .25rem .2rem .25rem 0; font-size: .33rem; color: #000;flex:1; border-bottom:1px solid #ddd; display: flex; justify-content: space-between;align-items: center;}
.list li p svg{ width: .2rem; height: .2rem; fill: #bbb;}
.profile-2XuMq{height: 1.2rem; display: flex; align-items: center;}
.profile-2XuMq svg{ width:.2rem; height: .42rem;}
.foot{position: fixed; bottom:0; left: 0; width: 100%; border-top: 1px solid #ccc; background: #fff; z-index: 1000;}
.tab{ display: flex; justify-content: space-between; height: 1rem; align-items:center; padding-top: .09rem;}
.tab a{display: flex; font-size: .22rem; flex-direction: column; align-items: center; width: 25%; color: #666;}
.tab a span{line-height: 1.4; display: block;}
.tab svg{width: .4rem; height: .4rem; margin-bottom: .03rem;}
.foot .on{color: #0089dc;}
</style>